import React, { useState } from 'react';
import { Tabs } from 'antd';
import { CaretLeftOutlined } from '@ant-design/icons';
import iconic_more from '@/assets/map/iconic_more.png';
import SidebarContext from './context';
import styles from './index.less';

type ItemsType = { label: string; key: string; children: React.ReactNode };

type Props = {
  items: ItemsType[];
};

const Tab = ({ text }: { text: string }): React.ReactNode => (
  <span style={{ padding: '0 16px', fontSize: 18, margin: 0 }}>{text}</span>
);

const SidebarConten: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <div
        className={styles.anchor}
        style={{ transform: `translateX(${open ? 0 : 612}px)` }}
        onClick={() => setOpen(prev => !prev)}
      >
        {open ? (
          <img style={{ width: 20 }} src={iconic_more} alt="" />
        ) : (
          <>
            <CaretLeftOutlined />
            <span>展开</span>
          </>
        )}
      </div>
      <div className={styles.sidebar} style={{ width: `${open ? 600 : 0}px` }}>
        <div className={styles.content}>{children}</div>
      </div>
    </div>
  );
};

const Sidebar: React.FC<Props> = ({ items }) => {
  const [open, setOpen] = useState(false);
  const [tab, setTab] = useState(items[0].key);

  return (
    <div>
      <div
        className={styles.anchor}
        style={{ transform: `translateX(${open ? 0 : 612}px)` }}
        onClick={() => setOpen(prev => !prev)}
      >
        {open ? (
          <img style={{ width: 20 }} src={iconic_more} alt="" />
        ) : (
          <>
            <CaretLeftOutlined />
            <span>展开</span>
          </>
        )}
      </div>
      <div className={styles.sidebar} style={{ width: `${open ? 600 : 0}px`, background: '#fff' }}>
        <div className={styles.content}>
          <SidebarContext.Provider value={{ open, tab }}>
            <Tabs
              activeKey={tab}
              onChange={setTab}
              tabBarGutter={0}
              tabBarStyle={{
                color: '#0009',
                fontSize: 24,
                margin: 0,
              }}
              items={items.map(item => ({
                key: item.key,
                label: <Tab text={item.label} />,
                children: (
                  <div style={{ padding: '12px 0' }}>
                    <div style={{ padding: '0 12px', height: 'calc(100vh - 214px)', overflow: 'auto' }}>
                      {item.children}
                    </div>
                  </div>
                ),
              }))}
            />
          </SidebarContext.Provider>
        </div>
      </div>
    </div>
  );
};

export { SidebarContext, SidebarConten };

export default Sidebar;
